<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框组</title>
    <link rel="stylesheet" href="../responsive-layout/responsive-layout.css">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./input-groups.css">
    <style>
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
<h2 class="center">自由布局</h2>
<input type="text" class="form-control" placeholder="请输入" style="margin-bottom: 10px;">

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">$</span>
</div>
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
</div>
<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">$</span>
</div>
<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">
            搜索
            <i class="fa fa-search"></i>
        </span>
</div>

<h2 class="center">尺寸</h2>
<div class="container">
    <div class="input-group input-group-lg">
        <input type="text" class="form-control" placeholder="大尺寸">
    </div>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="普通尺寸">
    </div>
    <div class="input-group input-group-sm">
        <input type="text" class="form-control" placeholder="小尺寸">
    </div>
</div>


<h2 class="center">加入响应式栏栅布局</h2>
<div class="container">
    <div class="row">
        <div class="col-8">前后有额外元素</div>
        <div class="col-16">
            <div class="input-group">
                <span class="input-group-addon">$ <input type="checkbox"></span>
                <input type="text" class="form-control">
                <span class="input-group-addon">$</span>
            </div>
        </div>
        <div class="col-8">前有额外元素</div>
        <div class="col-16">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-4">后有额外元素</div>
        <div class="col-8">
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-addon">$</span>
            </div>
        </div>

        <div class="col-4">后有额外元素</div>
        <div class="col-8">
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-addon">
            搜索
            <i class="fa fa-search"></i>
        </span>
            </div>
        </div>
    </div>

</div>
</body>
</html>